<template>
<div class="wrap">
    <!-- <van-nav-bar
   
   
    right-text="新增"
    left-arrow
   
    @click-right="onClickRight"
    /> -->
    <van-nav-bar @click-left="onClickLeft" left-arrow left-text="返回" title="" @click-right="onClickRight">
        <template #right>
            <span   class="add-desc">新增</span>
            <van-icon name="plus" size="16" />
        </template>
    </van-nav-bar>
    <van-pull-refresh
    v-model="isLoading"
    success-text="刷新成功"
    @refresh="onRefresh"
    >
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <div class="wrap-list" v-for="(item,index) in listData" :key="index">
                <div class="inner">
                    <div class="left">
                            <div>{{item.name}}</div>
                        <div class="name">{{item.title+'...'}}</div>
                        <div class="phone">{{item.visitedPhone}}</div>
                        <div class="time">{{item.phone}}</div> 
                    </div>
                    <div class="right">
                        <span  style="color:blue" v-if="item.requestStatus==0">{{item.shows}}</span>
                        <span style="color:red" v-if="item.requestStatus==1">{{item.shows}}</span>
                        <span  style="color:green" v-if="item.requestStatus==2">{{item.shows}}</span>
                    </div>
                </div>
                <div class="btns-wrap">
                   <div class="item-tag del" @click="delsure(item)">
                      删除
                   </div>
                   <div @click="viewMore(item)" class="item-tag more">
                       详情
                   </div>
                </div>
            </div>  
        </van-list>   
</van-pull-refresh>   
</div>
</template>

<script>
import { Notify,Dialog,Toast } from 'vant';
import axios from 'axios'
import api from '../api/servelist.js'
    export default {
        data: function () {
            return {
                loading:false,
                finished:false,
                isLoading:false,
                listData:[],
                currentPage:1, 
                pageSize:10,
                villageList:[]
            }
        },
        created(){
            //this.getlist()
            
        },
        mounted() {
           
        },
        methods: {
            viewMore(item){
                this.$router.push({path:'/viewserve',query:{id:item.id}})
            },
            delsure(item){
                Dialog.confirm({
                    title: '确认删除？',
                    message: '',
                })
                .then(() => {
                    let that=this
                    api.delServe({id:item.id}).then(e=>{
                        if(e.code==200){
                            that.finished=false
                            that.currentPage=1
                            that.listData=[]
                            Notify({ type: 'success', message: '操作成功' });
                            
                        }
                        
                    }).catch(err=>{
                        console.log(err)
                    })
                })
                .catch((err) => {
                    console.log(err)
                });
            },
            onClickLeft() {
               this.$router.go(-1)
            },
            onClickRight(){
                this.$router.push('/servedetail')
            },
            onLoad(){
               this.getlist()
            },
            onRefresh(){
                this.finished=false
                this.currentPage=1
                this.listData=[]
                
            },
            getlist(){
                let that=this
                let obj={
                    openId:openid,
                    pageIndex:this.currentPage,
                    pageSize:10,
                    condition:{
                        visitorOpenId:openid
                    }
                }
                api.getlist(obj).then(e=>{
                   
                    that.isLoading=false
                    that.loading=false
      
                    that.listData=that.listData.concat(e.result)
                    that.currentPage++
                   
                    if(e.result.length<10){
                        that.finished=true
                    }
                }).catch(err=>{
                    console.log(err)
                })
            },
            villageConfirm(val){
                this.form.communityId=val.id
                this.village=val.text
                this.villagePicker=false
            }
          
        }
    }
</script>

<style scoped lang="scss">
@import "../common.scss";
    .btns-wrap{
        display:flex;
        justify-content: flex-end;
        align-items: center;
    }
    .add-desc{
        color:#1989fa
    }
    .wrap{
        font-size:px2rem(11px);
        background:#f5f5f5;
    }
    .btns-wrap .item-tag{
        margin-right:20px;
    }
    .btns-wrap .del{
        color:red;
    }
    .btns-wrap .more{
        color:green;
    }
    .wrap-list{
        padding:20px 20px;
        box-sizing: border-box;
        margin:0 30px;
        border:2px solid #fafafa;
        border-radius: 12px;
        border-bottom:2px solid #c8e8ff;
        background:#fff;
        width:95%;
        margin: 16px auto;
  }
  .wrap-list .inner{
      display:flex;
      align-items: center;
      justify-content: space-between;
     

}
.phone{
    margin:6px 0;
}
.wrap-list .btns{
    display:flex;
    justify-content: flex-end;
    
}
.wrap-list .btns .pass{
    color:green;
    padding-right:12px;
   
    
}
.wrap-list .btns .pass:after{
  display:block;
   content: '';
   height:16px;
   position:relative;
   top:-50%;
   border-right:1px solid red; 
   right:-6px; 
    
}
.wrap-list .btns .nopass{
    color:red;
    
}
.name{
    margin:10px 0;
}

</style>
